<template>
  <div class="step-point">
    <div class="line-box">
      <a class="line"></a>
    </div>
    <div
      v-for="(item, idx) in active"
      :class="{ active : item.active, touchActive: actives[idx] }"
      @click="changeStep(idx)"
      :key="idx"
      class="point">
      <i>
        <div></div>
      </i>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    step: {
      type: Number,
      default: 0
    },
    actives: {
      type: Array,
      default: [false, false, false, false]
    }
  },
  components: {

  },
  data () {
    return {
      active: [{
        active: true
      }, {
        active: false
      }, {
        active: false
      }, {
        active: false
      }]
    }
  },
  watch: {
    step: function (val) {
      this.active.forEach((item, idx) => {
        item.active = false
      })
      this.active[val].active = true
    }
  },
  methods: {
    changeStep (step) {
      this.$emit('idx', step)
    }
  },
  created () {

  }
}
</script>

<style scoped lang="less">
.step-point {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.5em;
  height: 4em;
  position: relative;
  .point {
    display: block;
    height: 1.4em;
    width: 1.4em;
    border: 1px solid #666;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99;
    transition: all 0.3s;
    border-radius: 50%;
    i {
      transition: all 0.3s;
      a {
        transition: all 0.3s;
      }
    }
  }
  .line-box {
    display: flex;
    position: absolute;
    height: 4em;
    justify-content: center;
    align-items: center;
    width: 98%;
    .line {
      height: 1px;
      background: #777287;
      display: block;
      width: 90%;
      margin: 0 2.5%;
    }
  }
}
.active {
  background: #546EFF;
  box-shadow: 0 0 2px 0 #546EFF;
  border: 1px solid #6580FF !important;
  height: 2.8em !important;
  width: 2.8em !important;
  background: rgba(100, 127, 255, 0.28) !important;
  i {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.8em;
    width: 1.8em;
    background: #FFFFFF;
    box-shadow: 0 0 4px 0 rgba(0,0,0,0.27);
    border-radius: 50%;
    div {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 0.8em;
      border-radius: 50%;
      width: 0.8em;
      background: #546EFF;
      box-shadow: 0 0 2px 0 #546EFF;
    }
  }
}
.touchActive {
   background: #546EFF;
   border: 0px solid #6580FF !important;
   height: 2.8em !important;
   width: 2.8em !important;
   background: rgba(100, 127, 255, 0) !important;
   i {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.8em;
    width: 1.8em;
    background: #FFFFFF;
    box-shadow: 0 0 4px 0 rgba(0,0,0,0.27);
    border-radius: 50%;
    div {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 0.8em;
      border-radius: 50%;
      width: 0.8em;
      background: #546EFF;
      box-shadow: 0 0 2px 0 #546EFF;
    }
  }
}
</style>
